<template>
  <el-card style="height: 1000px">
    <el-header shadow="always">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
      <el-form-item label="头像" prop="photo">
        <el-upload
          action=""
          list-type="picture-card"
          :http-request="uploadFile"
          :show-file-list="false"
        >
          <el-avatar icon="el-icon-user-solid"
          style="width: 100px;height: 100px;"
          :src="form.photo"
          :fit="'cover'"
          ></el-avatar>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户名" prop="name">
        <el-input
          placeholder="请输入"
          v-model="form.name"
          style="width: 400px"
        ></el-input>
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-date-picker
          v-model="form.birthday"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio v-model="form.gender" :label="0" border>男</el-radio>
        <el-radio v-model="form.gender" :label="1" border>女</el-radio>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input
          placeholder="请输入"
          v-model="form.mobile"
          style="width: 400px"
        ></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="intro">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="form.intro"
          style="width: 400px"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="change" type="primary">修改</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import eventBus from '@/utils/eventBus'
export default {
  data () {
    return {
      form: {

        name: '',
        birthday: '',
        gender: 0,
        mobile: '',
        intro: ''
      },
      photoImage: {
        id: '',
        photo: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
        ],
        birthday: [{ required: true, message: '请选择生日', trigger: 'blur' }],
        photo: [{ required: true, message: '请上传头像', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getUser()
  },
  computed: {
    fileList () {
      return this.form.photo ? [{ url: this.form.photo }] : []
    }
  },
  methods: {
    async getUser () {
      const res = await this.$http.get('/v1_0/user/profile')
      this.form = res.data.data
      console.log(this.form)
    },
    change () {
      this.$refs.formRef.validate(async (res) => {
        if (res) {
          const rul = await this.$http.patch('/v1_0/user/profile', this.form)
          console.log(rul)
          this.getUser()
          eventBus.$emit('updateUser', this.form)
        }
      })
    },
    async uploadFile (obj) {
      const fd = new FormData()
      fd.append('photo', obj.file)
      const res = await this.$http.patch('/v1_0/user/photo', fd)
      console.log(res)

      this.form.photo = res.data.data.photo
      // console.log(this.form.photo)
      return res.data.data.photo
    }
  }
}
</script>
<style></style>
